<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                template="./admin.xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core">

    <ui:define name="content">
        <p:growl id="msgs" life="3000" showDetail="true"/>
        <h:form id="frmAllPosts">
            <p:dataTable id="posts" var="post" value="#{postManagement.getPosts(2)}" widgetVar="dtPosts" 
                         emptyMessage="No post found with given criteria" styleClass="dt-post border-none"
                         paginator="true" rows="10" paginatorPosition="bottom" 
                         paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} 
                         {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                         rowsPerPageTemplate="5,10,20,50" sortMode="multiple" >
                <f:facet name="header" >
                    <span class="dt-caption">All Posts</span>
                    <p:commandButton id="toggler" type="button" value="Columns" styleClass="float-right"
                                     icon="ui-icon-calculator"/>
                    <p:columnToggler datasource="posts" trigger="toggler" />
                </f:facet>
                <f:facet name="header">
                    <p:outputPanel styleClass="text text-left">
                        <h:outputText value="Search all fields:" />
                        <p:inputText id="globalFilter" onkeyup="PF('dtPosts').filter()" placeholder="Enter keyword"/>
                    </p:outputPanel>
                </f:facet>
                <p:column sortBy="#{post.postId}" toggleable="false" styleClass="col-Id">
                    <f:facet name="header">
                        <h:outputText value="No" />
                    </f:facet>
                    <h:outputText value="#{post.postId}" />
                </p:column>
                <p:column headerText="Title" filterBy="#{post.title}" filterMatchMode="contains" 
                          toggleable="false" styleClass="col-title" sortBy="#{post.title}">
                    <h:outputText value="#{post.title}" />
                </p:column>
                <p:column headerText="Content" filterBy="#{post.content}" filterMatchMode="contains"
                          toggleable="false" sortBy="#{post.content}">
                    <h:outputText value="#{postManagement.subContent(post,200)}..." escape="false" />
                </p:column>
                <p:column headerText="Category" filterBy="#{post.category}" 
                          filterMatchMode="in" styleClass="col-category">
                    <f:facet name="filter">
                        <p:selectCheckboxMenu label="Select" onchange="PF('dtPosts').filter()" scrollHeight="150"
                                              styleClass="selected-checkbox" converter="categoryConverter">
                            <f:selectItems value="#{postManagement.categorys}" var="category" 
                                           itemLabel="#{category.categoryName}" itemValue="#{category}" />
                        </p:selectCheckboxMenu>
                    </f:facet>
                    <h:outputText value="#{post.category.categoryName}" />
                </p:column>
                <p:column headerText="Creator" filterBy="#{post.user.userName}" 
                          filterMatchMode="exact" styleClass="col-creator">
                    <h:outputText value="#{post.user.userName}" />
                </p:column>
                <p:column headerText="Indexes" styleClass="col-index">
                    <h:outputText value="Views: #{post.viewCount}" /><br/>
                    <h:outputText value="Votes: #{postManagement.getVotes(post)}" /><br/>
                    <h:outputText value="Comments: #{post.comments.size()}" />
                </p:column>
                <p:column headerText="Status" styleClass="col-status" sortBy="#{post.active}">
                    <p:commandLink update=":frmEnable" rendered="#{!post.active}"  value="Disable" styleClass="command-link"
                                   oncomplete="PF('dialogEnablePost').show()" title="Click to enable">
                        <f:setPropertyActionListener value="#{post}" target="#{postManagement.selectedPost}" />
                    </p:commandLink>
                    <p:commandLink update=":frmDisable" rendered="#{post.active}"  value="Enable" styleClass="command-link"
                                   oncomplete="PF('dialogDisablePost').show()" title="Click to disable">
                        <f:setPropertyActionListener value="#{post}" target="#{postManagement.selectedPost}" />
                    </p:commandLink>
                </p:column>
                <p:column headerText="Choose" styleClass="col-choose">
                    <p:splitButton icon="ui-icon-search" title="View detail">
                        <p:menuitem value=" Add new" icon="ui-icon-circle-plus" 
                                    url="create-post.jsf" />
                        <p:menuitem value=" Edit" icon="ui-icon-pencil" url="update-post.jsf?id=#{post.postId}" >
                            <f:setPropertyActionListener value="#{post}" target="#{postManagement.selectedPost}" />
                        </p:menuitem>
                        <p:menuitem update=":frmDelete" value=" Delete" icon="ui-icon-close"
                                    oncomplete="PF('dialogDeletePost').show()" title="Disable">
                            <f:setPropertyActionListener value="#{post}" target="#{postManagement.selectedPost}" />
                        </p:menuitem>
                        <p:separator />
                        <p:menuitem update=":frmComments" value=" Comments" icon="ui-icon-close"
                                    oncomplete="PF('dialogComments').show()" title="Comments of post">
                            <f:setPropertyActionListener value="#{post}" target="#{postManagement.selectedPost}" />
                        </p:menuitem>
                    </p:splitButton>
                </p:column>
            </p:dataTable>
        </h:form>
        <!--Dialog confirm enable Post-->
        <h:form id="frmEnable">
            <p:confirmDialog id="confirmDialog" message="Are you really want to enable post 
                             #{postManagement.selectedPost.title} ?" header="Enable post" severity="alert"
                             widgetVar="dialogEnablePost" showEffect="fade" hideEffect="explode">
                <h:inputHidden value="#{postManagement.selectedPost.postId}" />
                <p:commandButton id="confirm" value="Yes" update=":frmAllPosts, :msgs" 
                                 actionListener="#{postManagement.enablePost(evt)}"
                                 styleClass="ui-confirmdialog-yes" icon="ui-icon-check" 
                                 oncomplete="PF('dialogEnablePost').hide()"/>                    
                <p:commandButton id="cancel" value="Cancel" onclick="PF('dialogEnablePost').hide()"
                                 styleClass="ui-confirmdialog-yes" icon="ui-icon-close" type="button"/>
            </p:confirmDialog>
        </h:form>
        <!--Dialog confirm disable Post-->
        <h:form id="frmDisable">
            <p:confirmDialog id="confirmDialog" message="Are you really want to disable post
                             #{postManagement.selectedPost.title} ?" header="Disable post" severity="alert"
                             widgetVar="dialogDisablePost" showEffect="fade" hideEffect="explode">
                <h:inputHidden value="#{postManagement.selectedPost.postId}" />
                <p:commandButton id="confirm" value="Yes" update=":frmAllPosts, :msgs" 
                                 actionListener="#{postManagement.disablePost(evt)}"
                                 styleClass="ui-confirmdialog-yes" icon="ui-icon-check" 
                                 oncomplete="PF('dialogDisablePost').hide()"/>                    
                <p:commandButton id="cancel" value="Cancel" onclick="PF('dialogDisablePost').hide()"
                                 styleClass="ui-confirmdialog-yes" icon="ui-icon-close" type="button"/>
            </p:confirmDialog>
        </h:form>
        <!--Dialog confirm delete Post-->
        <h:form id="frmDelete">
            <p:confirmDialog id="confirmDialog" message="Are you really want to delete post
                             #{postManagement.selectedPost.title} ?" header="Delete post" severity="alert"
                             widgetVar="dialogDeletePost" showEffect="fade" hideEffect="explode">
                <h:inputHidden value="#{postManagement.selectedPost.postId}" />
                <p:commandButton id="confirm" value="Yes" update=":frmAllPosts, :msgs" 
                                 actionListener="#{postManagement.deletePost(evt)}"
                                 styleClass="ui-confirmdialog-yes" icon="ui-icon-check" 
                                 oncomplete="PF('dialogDeletePost').hide()"/>                    
                <p:commandButton id="cancel" value="Cancel" onclick="PF('dialogDeletePost').hide()"
                                 styleClass="ui-confirmdialog-yes" icon="ui-icon-close" type="button"/>
            </p:confirmDialog>
        </h:form>
        <!--Dialog confirm delete Post-->
        <h:form id="frmComments">
            <p:dialog header="Comments" widgetVar="dialogComments" minHeight="500" width="800">
                <p:dataTable var="comment" value="#{postManagement.selectedPost.comments}"
                             emptyMessage="No post found with given criteria" paginator="true" 
                             rows="10" paginatorPosition="bottom"
                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} 
                             {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                             rowsPerPageTemplate="5,10,20,50" >
                    <p:column headerText="ID" styleClass="col-Id">
                        <h:outputText value="#{comment.commentId}" />
                    </p:column>

                    <p:column headerText="Content">
                        <h:outputText value="#{comment.content}" escape="false"/>
                    </p:column>

                    <p:column headerText="Date" styleClass="col-title">
                        <h:outputText value="#{comment.updateDate}" />
                    </p:column>

                    <p:column headerText="User" styleClass="col-creator">
                        <h:outputText value="#{comment.user.userName}" />
                    </p:column>
                    <p:column headerText="Choose" styleClass="col-choose">
                        <p:commandButton update=":frmDeleteComment" icon="ui-icon-close"
                                         oncomplete="PF('dialogDeleteComment').show()" title="Delete">
                            <f:setPropertyActionListener value="#{comment}" target="#{postManagement.selectedComment}" />
                        </p:commandButton>  
                    </p:column>
                </p:dataTable>
            </p:dialog>
        </h:form>
        <h:form id="frmDeleteComment">
            <p:confirmDialog id="confirmDialog" message="Are you really want to delete comment
                             #{postManagement.selectedComment.commentId} ?" header="Delete comment" severity="alert"
                             widgetVar="dialogDeleteComment" showEffect="fade" hideEffect="explode">
                <h:inputHidden value="#{postManagement.selectedComment.commentId}" />
                <p:commandButton id="confirm" value="Yes" update=":frmComments, :msgs" 
                                 actionListener="#{postManagement.deleteComment(evt)}"
                                 styleClass="ui-confirmdialog-yes" icon="ui-icon-check" 
                                 oncomplete="PF('dialogDeleteComment').hide()"/>                    
                <p:commandButton id="cancel" value="Cancel" onclick="PF('dialogDeleteComment').hide()"
                                 styleClass="ui-confirmdialog-yes" icon="ui-icon-close" type="button"/>
            </p:confirmDialog>
        </h:form>
    </ui:define>

</ui:composition>
